<style lang='stylus' scoped>
page {
  height: 100%;
}

.durationBtn {
  float: left;
  box-sizing: border-box;
  border: 1rpx solid #3e87f0;
  height: 100rpx;
  width: 20%;
  margin: 20rpx 2%;
  text-align: center;
  line-height: 150rpx;
}

.durationTle {
  width: 100%;
  line-height: 100rpx;
}

.bl {
  display: inline-block;
}

.r-view {
  float: right;
}

.btn-card {
  display: inline-block;
  height: 60rpx;
  background-color: #ed3f14;
  font-size: 36rpx;
  line-height: 60rpx;
  color: #fff;
}

.card-bg {
  background: linear-gradient(90deg, #3e87f0, #3e78f5, #3e87f0);
  border: 1rpx solid #f1f1f1;
}

.cardSel {
  width: 40rpx;
  height: 40rpx;
  border: 1rpx solid #ff7442;
  border-radius: 50%;
  background-color: #ff7442;
}

.cardNoSel {
  width: 40rpx;
  height: 40rpx;
  border: 1rpx solid #f1f1f1;
  border-radius: 50%;
  background-color: #f1f1f1;
}

.popupTitle {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 36rpx;
  text-align: center;
}

.popupTip {
  height: 60rpx;
  line-height: 30rpx;
  font-size: 26rpx;
  color: #dcdcdc;
}

.popupBat {
  display: block;
  width: 40%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 36rpx;
  text-align: center;
}

.popupTipBatType {
  display: block;
  width: 40%;
  height: 60rpx;
  line-height: 60rpx;
  border: 1rpx solid #ccc;
  margin: 0 5%;
  float: left;
  text-align: center;
}

.batTip {
  width: 100%;
  line-height: 50rpx;
  background-color: #dcdcdc;
}

.lineH {
  line-height: 1.5;
  text-indent: 20rpx;
}

.line15 {
  line-height: 1.5;
}

.batColor {
  font-weight: bold;
  color: #3e87f0;
}

.lead-acidBorder {
  width: 80%;
  margin: 0 10%;
}

.title-bold {
  line-height: 1.8;
  font-weight: bold;
}

.borderB {
  border: 2rpx solid #3e87f0;
}

.borderDashed {
  border: 1rpx dashed #3e87f0;
}

.arrows {
  text-indent: 25%;
}

.arrows1 {
  text-indent: 35%;
}

.table {
  box-sizing: border-box;
  width: 50%;
  height: 50rpx;
  border: 1rpx solid #3e87f0;
}

.closePopup {
  text-align: right;
  color: #f4b697;
  margin: 10rpx 30rpx;
}

.bla1 {
  color: #333333;
}

.bgGray1 {
  background-color: #f5f5f5;
}

.StyColor1 {
  color: #3e87f0;
}

.black1 {
  color: #333333;
}

view {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.pdBox {
  padding-right: 32rpx;
  padding-left: 32rpx;
}

.inputBox {
  border: 4rpx solid #dcdcdc;
  width: 686rpx;
  height: 100rpx;
  font-weight: bold;
}

.inputBoxOne {
  border-right: 3rpx dashed #dcdcdc;
  width: 14.28%;
  height: 100%;
  font-size: 70rpx;
}

.inputBoxOneEnd {
  border-right: 0rpx dashed #dcdcdc;
  width: 14.28%;
  height: 100%;
  font-size: 70rpx;
}

.inputBoxSel {
  border: 4rpx solid #45c018;
}

.portStatusBox {
  width: 30rpx;
  height: 30rpx;
}

.portStatusUsable {
  color: #00b56d;
  background-color: #00b56d;
}

.portStatusDisabled {
  color: #e02212;
  background-color: #e02212;
}

.portStatusInuse {
  color: #dcdcdc;
  background-color: #dcdcdc;
}

/* 可使用端口的样式 */
.selStatusBoxFree {
  width: 15%;
  margin: 0.71428%;
  border: 2rpx solid #00b56d;
}

.StatusBoxFree {
  width: 15%;
  margin: 0.71428%;
  border: 2rpx solid #00b56d;
  background-color: #00b36b;
  color: #fff;
}

/* 故障端口的样式 */
.selStatusBoxActive {
  width: 15%;
  margin: 0.71428%;
  border: 2rpx solid #e02212;
}

/* 用户选择端口的样式 */
.userSelectBox {
  width: 15%;
  margin: 0.71428%;
  border: 2rpx solid #3e87f0;
}

/* 被占用端口样式 */
.selStatusBoxUse {
  width: 15%;
  margin: 0.71428%;
  border: 1rpx solid #dcdcdc;
}

.selStatusBoxBorder {
  border: 1rpx solid #3e87f0;
}

.selStatusDcBox {
  width: 330rpx;
}

.selStatusDcBox {
  width: 330rpx;
}

.BatteryType {
  position: relative;
  width: 250rpx;
  border: 1rpx solid #bdbdbd;
  margin: 0 45rpx;
  overflow: hidden;
  text-align: center;
  line-height: 1;
  color: #3e87f0;
}

.selBatteryType {
  position: relative;
  width: 250rpx;
  border: 1rpx solid #bdbdbd;
  margin: 0 45rpx;
  overflow: hidden;
  text-align: center;
  line-height: 1;
  color: #fff;
  background-color: #3e87f0;
}

// 电池种类选择(默认样式)
.batteryVolType {
  border: 1rpx solid #babcbc;
  width: 160rpx;
  color: #3e87f0;
}

/* 电池种类被选中时的样式 */
.selBatVoltageType {
  border: 1rpx solid #babcbc;
  width: 160rpx;
  background-color: #3e87f0;
  color: #fff;
}

.keyOneBox {
  width: 250rpx;
  height: 100rpx;
  line-height: 100rpx;
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}

.keyOneBoxSel {
  width: 250rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #d9d9d9;
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}

.keyHideBox {
  height: 50rpx;
  width: 100%;
  border-top: 2rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}

.keyOverlay {
  background-color: #fff 0;
}

.chargingBox {
  width: 1800rpx;
}

.chargingBox1 {
  width: 730rpx;
}

.chargingStandard {
  border: 2rpx solid #dcdcdc;
  overflow: hidden;
}

.wattRange {
  background-color: #dcdcdc;
}

.advertisement {
  width: 100%;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  overflow: hidden;
}

.swiperImg1 {
  width: 686rpx;
  height: 200rpx;
}
</style>

<template>
  <!--  
  +6
  铅酸 自选
  锂电 48v 
  -->
  <view class="uni-common-mt pd15-y bla1">
    <view class="flex-between pdBox">
      <view class="ft36">请扫码或输入充电桩编号</view>
      <view class="flex flex-wrap">
        <view>
          <i-icon type="scan" size="28" color="#3e87f0" />
        </view>
        <view class="StyColor1 ft36" @click="scanQrcode">点击扫码</view>
      </view>
    </view>

    <!-- 
        1.点击每一个都可以输入，后面数字消失；
        2.写完一个会自动跳下一个
        3.输完自动搜索充电桩信息
    -->
    <view class="pdBox">
      <view class="flex flex-wrap inputBox">
        <view style class="inputBoxOne">
          <view
            style="width:100% ;height:100%;line-height:100rpx; text-align:center;font-size:50rpx"
            :class="inputBoxSelClass[0]"
            @click="inpBoxNext('f0','v0')"
          >{{inputValue[0]}}</view>
        </view>
        <view style class="inputBoxOne">
          <view
            style="width:100% ;height:100%;line-height:100rpx; text-align:center;font-size:50rpx"
            :class="inputBoxSelClass[1]"
            @click="inpBoxNext('f1','v1')"
          >{{inputValue[1]}}</view>
        </view>
        <view style class="inputBoxOne">
          <view
            style="width:100% ;height:100%;line-height:100rpx; text-align:center;font-size:50rpx"
            :class="inputBoxSelClass[2]"
            @click="inpBoxNext('f2','v2')"
          >{{inputValue[2]}}</view>
        </view>
        <view style class="inputBoxOne">
          <view
            style="width:100% ;height:100%;line-height:100rpx; text-align:center;font-size:50rpx"
            :class="inputBoxSelClass[3]"
            @click="inpBoxNext('f3','v3')"
          >{{inputValue[3]}}</view>
        </view>
        <view style class="inputBoxOne">
          <view
            style="width:100% ;height:100%;line-height:100rpx; text-align:center;font-size:50rpx"
            :class="inputBoxSelClass[4]"
            @click="inpBoxNext('f4','v4')"
          >{{inputValue[4]}}</view>
        </view>
        <view style class="inputBoxOne">
          <view
            style="width:100% ;height:100%;line-height:100rpx; text-align:center;font-size:50rpx"
            :class="inputBoxSelClass[5]"
            @click="inpBoxNext('f5','v5')"
          >{{inputValue[5]}}</view>
        </view>
        <view style class="inputBoxOneEnd">
          <view
            style="width:100% ;height:100%;line-height:100rpx; text-align:center;font-size:50rpx"
            :class="inputBoxSelClass[6]"
            @click="inpBoxNext('f6','v6')"
          >{{inputValue[6]}}</view>
        </view>
      </view>
    </view>
	
    <view class="flex flex-wrap mgt20 pdBox">
      <view class>
        <i-icon type="accessory" size="20" color="#555555" />
      </view>
      <view class="ft32 mgl5 flex-between">
        <view>请选择充电端口</view>
        <view class="flex flex-wrap">
          <view class="mgr15 flex flex-wrap mgl50">
            <i class="portStatusUsable portStatusBox radius-8 mgr5"></i>
            空闲
          </view>
          <view class="mgr15 flex flex-wrap">
            <i class="portStatusInuse portStatusBox radius-8 mgr5"></i>
            占用
          </view>
          <view class="mgr15 flex flex-wrap">
            <i class="portStatusDisabled portStatusBox radius-8 mgr5"></i>
            故障
          </view>
        </view>
      </view>
    </view>
	
    <view class="flex flex-wrap mgt10 box-sizing pdBox">
		<view :class="item.class" 
			  :style="item.mouthNoShow>=13?'width: 23%;margin:1%;':'width:15%;margin:0.71428%'" 
			  v-for="(item,index) in mouth"
		      :key="item.mouthId"
		      :loading="loading.status" 
			  @click="selMountId(item.mouthId,index)"
		>
<!--   <view
        :class="(item.doorStatus!==3&&item.doorType===0&&item.mouthStatus===0)?'radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxFree box-sizing'
		:(item.doorStatus===3||(item.doorStatus!==3&&item.doorType===0&&item.mouthStatus===3||4||5||6||7||8||9||10||11||12||13||14||15||16))?'radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxActive box-sizing'
     :item.mouthStatus===17?'radius-8 pd10-y flex flex-column-center mgt20 StatusBoxFree box-sizing'
      :(item.doorStatus!==3&&item.doorType===1)||(item.doorStatus!==3&&item.doorType===0&&item.mouthStatus===2||1)?'radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxUse box-sizing':'radius-8 pd10-y flex flex-column-center mgt20  selStatusBoxActive box-sizing'"
        :style="item.mouthNoShow>=13?'width: 23%;margin:1%;':'width:15%;margin:0.71428%'"
        v-for="(item,index) in mouth"	
        :key="item.mouthId"
        :loading="loading.status"
        @click="selMountId(index)"> -->
		<view
		  class="pd20 ft48"
		  :style="item.fontClass"
		>{{item.mouthNoShow}}</view>
<!--        <view
          class="pd20 ft48"
          :style="(item.doorStatus!==3&&item.doorType===0&&item.mouthStatus===0)?'color:#00b56d'
		  :(item.doorStatus===3||(item.doorStatus!==3&&item.doorType===0&&item.mouthStatus===3||4||5||6||7||8||9||10||11||12||13||14||15||16))?'color:#e02212'
          :item.mouthStatus===17?'color:#fff'
          :((item.doorStatus!==3&&item.doorType===1)||(item.doorStatus!==3&&item.doorType===0&&item.mouthStatus===2||1))?'color:#dcdcdc':'color:#e02212'"
        >{{item.mouthNoShow}}</view> -->
		</view>
    </view>
    <!-- 电池类型 -->	
    <view class="mgt20 ft32 pdBox">
      <view v-if="batTypeSelVisible">
        <view class="flex flex-wrap" @click="handleOpen1">
          <i-icon type="flashlight" size="25" color="#555555" />
          <view class="ft32 mgl10">电池类型</view>
        </view>
        <view class="flex flex-wrap mgt20">
          <view :class="BatTypeAutoClass" @click="autoAdaptive()">自动适配</view>

          <view :class="BatTypeClass" @click="handleOpen1()">{{battery}}</view>
        </view>
      </view>

      <!--  -->

      <view class="mgt30">
        <i-icon type="label" size="20" color="#555555" />
        <view class="txt-rg bl mgl10">付费模式</view>
        <view class="icon-lg r-view">
          <picker
            mode="multiSelector"
            :range="payTypeList"
            :value="payType"
            @change="payTypeChange"
            class="bl"
          >
		    <view v-if="payType=='月卡'" class="uni-input">{{payType}}</view>
            <view v-else class="uni-input">{{payType +` (`+ myAmount/100 +`)元`}}</view>
          </picker>
          <i-icon type="enter" size="20" color="#ccc" />
        </view>
      </view>

      <view class="mgt30" v-if="!(orderInfo.cardId)&&payType=='余额'">
        <i-icon type="financial_fill" size="20" color="#555555" />
        <view class="txt-rg bl mgl10">我的钱包余额</view>
        <view class="icon-lg r-view pdr10 ftr">{{myAmount/100}}元</view>
      </view>


      <view class="mgt30" v-if="payType=='月卡'&&orderInfo.cardId!=''">
        <i-icon type="barrage" size="20" color="#555555" />
        <view class="txt-rg bl mgl10">使用月卡编号</view>
        <view class="icon-lg r-view pdr10">{{records.length==1?records[0].cardNo:"-"}}</view>

      </view>

      <!-- <view class="mgt30">
        <i-icon type="coordinates" size="20" color="#c6c6c6" />
        <view class="txt-rg bl mgl10">充电桩位置</view>
        <view class="icon-lg r-view pdr10">{{province+city+area+equipmentAddress}}</view>
      </view>-->
    </view>
    <!--  -->
    <!-- <view class="bgGray1 mgt20 pd10 flex">
      <view class="eli">注意事项：出于安全考虑，禁止使用以下电池得车辆 在本充电站充电:</view>
      <view class="blue1" @click="tipOpen()">了解更多</view>
    </view>-->

    <view class="pdBox mgt20">
      <!-- <i-icon type="time" size="20" color="#555555" />
      <view class="txt-rg bl mgl10">选择充电时长</view>-->
     <!-- <view class="ft48 mgr380">
        <i-button :type="autoChargingBtn" size="mini" @click="chargingVisiable()">智能充电</i-button>
      </view> -->
      <!-- 选择充电时长，替代原来的智能充电，智能充电也就是智能充电 -->
	  <view class="flex flex-wrap">
	<!-- 	  <view class="durationBtn radius-16" @click="selectTime('8')">
			  <view class="durationTle">智能充电</view>
		  </view>
		  <view class="durationBtn radius-16" @click="selectTime('1')">
			  <view class="durationTle">1小时</view>
		  </view> -->
		  <!-- time为一个数组，item为数组内部存储的数据 -->
		  <view class="durationBtn radius-16"
				v-for="(item, index) in time"
				@click="selectTime(index)"
				:style="selTimeClass[index]"
		  >
			  <view :key="index" class="durationTle">{{item}}</view>
		  </view>
	  </view>

      
      <view class="ft28 mgt10" v-if="priceVisible">
        <view class="StyColor1 mgl30 mgt20" @click="priceVisibleView">
          收费详情:
          <i-icon type="unfold" size="18" color="#3e87f0" v-if="visibleCharging" />
          <i-icon type="packup" size="18" color="#3e87f0" v-if="!(visibleCharging)" />
        </view>
        <scroll-view
          scroll-x="true"
          class="chargingBox1 mgt10"
          v-if="visibleCharging"
        >
          <view class="flex flex-wrap chargingBox">
            <view
              class="chargingStandard radius-16 ta mgr10"
              v-for="(item,index) in meal.chargePowerData"
              :key="index" >
              <view class="wattRange ft24 pd10">{{item.spower}}W＜功率≤{{item.epower}}W</view>
              <view class="ft26 pd5-y">{{item.chargePeakAmount/100}}元/{{meal.amountTime}}小时</view>
            </view>
          </view>
        </scroll-view>
        <view
          class="ft26 mgt20"
          style="color:#a1a1a1"
          v-if="visibleCharging"
        >*电池充满自动停止充电；单次充电最长时间为8小时             
        </view>
      </view>
      <!-- <picker
            mode="selector"
            :range="time"
            :value="selTime"
            @change="bindTimeChange"
            :header-text="timeTip"
            class="bl"
          >
            <view class="uni-input StyColor1">{{selTime}}</view>
          </picker>
      <i-icon type="enter" size="20" color="#ccc" />-->
    </view>

    <view class="mg100-x">
      <i-button
        shape="circle"
        size="small"
        type="primary"
        :loading="getOrder"
        @click="onTimeGetAmount"
      >开始充电</i-button>
    </view>

    <!-- 广告位 -->
    <!-- <view class="advertisement mgt20 pdBox radius-16" v-if="advertisementShow">
      <swiper
        class="advertisement radius-16"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item v-for="(item,index) in imglist" :key="index">
          <view class="swiperImg1 radius-16">
            <img :src="item" alt=""  class="swiperImg1" >
          </view>
        </swiper-item>
      </swiper>
    </view>-->

    <!-- 电池选择弹出框  duration="200" -->
    <van-popup :show="visibleVol" position="bottom" @close="handleClose1">
      <view class="ft32">
        <view class="popupTitle">请选择电池类型</view>
        <view class="popupTip flex flex">
          <i-icon type="warning" color="#f2c262" size="20" class="mgr5" />
          <view>请如实选择您的电池类型，以免损伤电池,若你无法判断电池类型，请选择自动适配</view>
        </view>
        <view class="flex flex-wrap mg15-x mg25-y ta">
          <view
            v-for="(item,index) in voltageList"
            :key="index"
            :class="item.BatVoltageClass"
            @click="batChange(item.type,item.voltage,index)"
          >{{item.name}}</view>
        </view>
        <view class="ft32 ta batTip" @click="visibleBatTip=true;
          ">↓↓如何辨别电池类型↓↓</view>
      </view>

      <view v-if="visibleBatTip" class="flexBatSelBot">
        <view class="closePopup" @click="closePopupView">
          <i-icon type="close" size="25" color="#555555 " />
        </view>
        <view class="ta ft40 mg20 lineH">---如何辨别电池类型---</view>
        <view class="ft32 lineH">
          <view class="title-bold">1.从外观识别铅酸和锂电</view>
          <view>
            <span class="batColor lineH">铅酸电池</span>
            一般16~30公斤，体积大(似摩托车外形)
          </view>
          <view>
            <span class="batColor lineH">锂电池</span>
            一般2.5~3.0公斤，体积小(似自行车外形)
          </view>
        </view>

        <view class="ft32 lineH">
          <view class="title-bold">
            2.从充电器识别
            <span class="batColor">铅酸</span>
          </view>
          <view class="lead-acidBorder borderDashed mgt20 line15">
            <view class="ta">
              (
              <span class="borderB">铅酸电池</span>充电器)
            </view>
            <view>
              型号:
              <span>XXX-XXX</span>
            </view>
            <view>
              输入:
              <span>AC 220V 50Hz 130W</span>
            </view>
            <view>
              输出:
              <span class="borderB">74V</span>-1.8A
            </view>
          </view>

          <i class="ft40 arrows">⬇</i>

          <view class="flex flex-wrap ta mgt10 lead-acidBorder">
            <view class="table">输出电压</view>
            <view class="table">电池类型</view>
            <view class="table">≈59V</view>
            <view class="table">铅酸48V</view>
            <view class="table">≈73V</view>
            <view class="table">铅酸60V</view>
            <view class="table">≈88V</view>
            <view class="table">铅酸72V</view>
          </view>
        </view>

        <view class="ft32 lineH">
          <view class="title-bold">
            3.从充电器识别
            <span class="batColor">锂电</span>
          </view>
          <view class="lead-acidBorder borderDashed mgt20 line15">
            <view class="ta">
              (
              <span class="borderB">锂电池</span>充电器)
            </view>
            <view>
              型号:
              <span>XXX-XXX</span>
            </view>
            <view>
              输入:
              <span>AC 220V 50/60Hz ~1.8A</span>
            </view>
            <view>
              输出: DC
              <span class="borderB">42.0v</span> 2.0A
            </view>
          </view>
          <i class="ft40 arrows1">⬇</i>
          <view class="flex flex-wrap ta mgt10 mgb30 lead-acidBorder">
            <view class="table">输出电压</view>
            <view class="table">电池类型</view>
            <view class="table">42.0V/46.2V</view>
            <view class="table">锂电36V</view>
            <view class="table">54.6V/58.8V</view>
            <view class="table">锂电48V</view>
            <view class="table">71.4V/73.0V</view>
            <view class="table">锂电60V</view>
          </view>
          <view class="mgt20 mgb20 ta">---已经到底了---</view>
        </view>
      </view>
    </van-popup>
    <!-- 键盘  duration="200" -->
    <van-popup
      overlay-style="background-color: rgba(0, 0, 0, 0.01);"
      :show="visibleKey"
      position="bottom"
      overlay="true"
      @close="onHideKey"
    >
      <view class="ta keyHideBox" @click="onHideKey()">
        <i-icon type="unfold" size="20" />
      </view>
      <view class="flex flex-wrap">
        <view hover-class="keyOneBoxSel" class="keyOneBox ft32 ta" @click="changeInpVal(1)">1</view>
        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(2)">2</view>
        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(3)">3</view>
        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(4)">4</view>
        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(5)">5</view>
        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(6)">6</view>
        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(7)">7</view>
        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(8)">8</view>
        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(9)">9</view>

        <view class="keyOneBox ft32 ta"></view>

        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal(0)">0</view>

        <view class="keyOneBox ft32 ta" hover-class="keyOneBoxSel" @click="changeInpVal('d')">
          <i-icon type="return" size="28" />
        </view>
      </view>
    </van-popup>
    <!-- 会员卡 -->
    <van-popup
      overlay-style="background-color: rgba(0, 0, 0, 0.6);"
      :show="cardListVisiable"
      overlay="true"
      custom-style="height:50%;width:80%;background-color:#f1f1f1"
      catch="touchstart"
      round:true
      closeable:true
      @close="closeSelCard"
    >
      <view>

        <view class="ta ft30 pdt20" v-if="records.length>0&&nowOrderId==null">已选择使用的月卡</view>
        <view v-if="records.length>0&&nowOrderId==null" class="ft28">
          <view
            class="pd20 mg30-x mgt20 radius-16 bgw border-border card-bg ftw"
            v-for="(cardList,index) in records"
            :key="cardList.cardId"
            @click="selCard(cardList.cardId,index)">
            <view>
              <view class="item-header flex flex-between bcardList-bottom">
                <text class="ftw">卡号:</text>
                <text>{{cardList.cardNo}}</text>
              </view>

              <view class="item-body pdt20">
                <view class="cell flex flex-between mgb12">
                  <text
                    class="ftw ft30"
                  >月卡类型:{{ cardList.cardType === 1 ? '城市卡' : cardList.cardType === 2 ? '设备卡':'' }}</text>
                  <text
                    :class="[cardList.isUse === 0 ? 'dlc-success': cardList.isUse==1 && cardList.isPast==2? 'dlc-warning ':'dlc-success']"
                  >{{ cardList.isPast==2?"已过期": cardList.isPast==1&&cardList.isUse == 1 ? '未使用' : cardList.isPast==1&&cardList.isUse == 2? '使用中':'-'}}</text>
                </view>

                <view class="cell flex flex-between mgb12" v-if="cardList.cardType==2">
                  <text class="ftw">可使用充电桩编号:</text>
                  <text>{{cardList.equipmentNumber}}</text>
                </view>

                <view class="cell flex flex-between mgb12" v-if="cardList.cardType==2">
                  <text class="ftw">充电桩所在地:</text>
                  <text>{{cardList.address}}</text>
                </view>

                <view class="cell flex flex-between mgb12" v-if="cardList.cardType==1">
                  <text class="ftw">适用地区:</text>
                  <text>{{cardList.province+cardList.city }}</text>
                </view>

                <view class="cell flex flex-between mgb12">
                  <text class="ftw">剩余时长:</text>
                  <text>{{ Math.floor((cardList.useTimeQuantum)/1000/3600)}}小时</text>
                </view>

                <view class="cell flex flex-between mgb12">
                  <text class="ftw">有效期:</text>
                  <text>{{cardList.startTime.slice(0,10).replace(/-/g,'.')}}-{{cardList.endTime.slice(0,10).replace(/-/g,'.')}}</text>
                </view>

                <view class="cell flex mgb12 flex-align-end" v-if="cardList.isPast==2"></view>
              </view>
            </view>
            <!-- <view style="width:10%;height:100% ">
              <i :class="cardSelList[index]">
                <i-icon type="right" size="22" color="#fff" 
                 v-if="cardSelList[index]=='cardSel mgl10 ta'"
                />
              </i>
            </view>-->
          </view>
        </view>
        <!-- 1.无进行中订单 a.无月卡显示 -显示购买;b.有月卡显示月卡，不显示购买
             2.有进行中订单 a.无月卡，可能月卡被使用了，检测有无进行中订单，有的话不显示购买，显示余额支付;
              
        -->
        <view v-if="records.length==0&&this.nowOrderId==null">
          <view class="ft32 ta ftr mgt100">您账户没有月卡，请先购买再进行选择</view>
           <view class="flex flex-wrap mgt20">
         <view style="width:50%" class>
         <i-button @click="toPlanList" type="primary" shape="circle" size="small">去购买</i-button>
        </view>
        <view style="width:50%" class>
          <i-button @click="closeSelCard" type="primary" shape="circle" size="small">返回</i-button>
        </view>
      </view>
        </view>

        <!-- <view class="mg100-x">
           <i-button   @click="toPlanList" type="primary" shape="circle" size="small"
            >确定</i-button>
        </view>-->
      </view>
      <view class="flex flex-wrap" style="" v-if="records.length>0&&nowOrderId==null">
        <view style="width:50%" class>
          <i-button @click="closeSelCard" type="primary" shape="circle" size="small">取消使用</i-button>
        </view>
        <view style="width:50%" class>
          <i-button @click="confirmselCard" type="primary" shape="circle" size="small">确定</i-button>
        </view>
      </view>

      <view v-if="nowOrderId!=null" class="ta ft32 mgt100">
        你有正在进行中的订单
        <view class="flex flex-wrap">
         <view style="width:50%" class>
          <i-button @click="goToOrder" type="primary" shape="circle" size="small">订单列表</i-button>
        </view>
        <view style="width:50%" class>
          <i-button @click="closeSelCard" type="primary" shape="circle" size="small">返回</i-button>
        </view>
      </view>

        </view>

    
    </van-popup>
    <i-message id="message" />

    <!--  -->
    <van-dialog use-slot title="提示" :show="dialogShow" @close="tipClose()">
      <view class="mg50">
        <view class="ft30">注意事项：出于安全考虑，禁止使用以下电池得车辆在本充电站充电:</view>
        <view class>
          <view class="flex flex-start mgt20">
            <view>
              <i-icon type="collection" size="20" color="#e21918" />
            </view>
            <view class="black1 ft36 mgl10">破损或者严重老化的电池(电池使用超过2年)</view>
          </view>
          <view class="flex flex-start mgt20">
            <view>
              <i-icon type="collection" size="20" color="#e21918" />
            </view>
            <view class="black1 ft36 mgl10">非原厂，非正规渠道购买来历不明电池</view>
          </view>
          <view class="flex flex-start mgt20">
            <view>
              <i-icon type="collection" size="20" color="#e21918" />
            </view>
            <view class="black1 ft36 mgl10">超出国标容量的电池</view>
          </view>
        </view>
        <view class="ft30 mgt20">根据主管部门建议，单次充电时长不得超过8小时</view>
      </view>
    </van-dialog>
    <!--  -->
    <i-modal
      title="是否跳转到进行中的订单"
      :visible="onOrdervisible"
      @ok="goToOrder"
      @cancel="onOrdervisible=false"
    ></i-modal>
  </view>
</template> 


<script>
import {
  userScan,
  createOrder,
  calculationAmount,
  userCardList,
  getUseOrder,
  getAmount,
  getOpenFlag,
  authorization,
  systemParam,
  managerScan,
  getAroundList,
  systemParamPic,
} from "@/api";
import store from "@/store";
// 截取url参数
import { floatAdd } from "../../utils/index.js";
import { Toast } from "@/wxcomponents/vant/toast/toast";
const { $Message } = require("@/wxcomponents/iview/base/index");

export default {
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      nowOrderId: null,
      records: [],
      // 弹出窗
      dialogShow: false,
      order: {},
      loading: {
        status: false,
      },
      //充电桩设备码
      equipmentNumber: "",
      //地址
      province: "",
      city: "",
      area: "",
      equipmentAddress: "",
      //充电桩ID
      equipmentId: "",
	  selTimeClass: ["","","","","","","",""],							//选择时间的按钮的样式
      //充电桩端口状态数据
	  // 这里设置mouth数组的默认值，后续扫码会对内部的数据进行更新
      mouth: [
        {
          mouthId: 1,											//格口Id
          mouthNoShow: "1",										//设备格口是否显示，1显示0不显示
          mouthStatus: 0,										//设备端口默认为空闲状态
        },
        {
          mouthId: 2,
          mouthNoShow: "2",
          mouthStatus: 0,
        },
        {
          mouthId: 3,
          mouthNoShow: "3",
          mouthStatus: 0,
        },
        {
          mouthId: 4,
          mouthNoShow: "4",
          mouthStatus: 0,
        },
        {
          mouthId: 5,
          mouthNoShow: "5",
          mouthStatus: 0,
        },
        {
          mouthId: 6,
          mouthNoShow: "6",
          mouthStatus: 0,
        },
        {
          mouthId: 7,
          mouthNoShow: "7",
          mouthStatus: 0,
        },
        {
          mouthId: 8,
          mouthNoShow: "8",
          mouthStatus: 0,
        },
        {
          mouthId: 9,
          mouthNoShow: "9",
          mouthStatus: 0,
        },
        {
          mouthId: 10,
          mouthNoShow: "10",
          mouthStatus: 0,
        },
        {
          mouthId: 11,
          mouthNoShow: "11",
          mouthStatus: 0,
        },
        {
          mouthId: 12,
          mouthNoShow: "12",
          mouthStatus: 0,
        },
        {
          mouthId: 13,
          mouthNoShow: "13",
          mouthStatus: 0,
        },
        {
          mouthId: 14,
          mouthNoShow: "14",
          mouthStatus: 0,
        },
        {
          mouthId: 15,
          mouthNoShow: "15",
          mouthStatus: 0,
        },
        {
          mouthId: 16,
          mouthNoShow: "16",
          mouthStatus: 0,
        },
      ],
      upmouth: [
        {
          mouthId: 1,
          mouthNoShow: "1",
          mouthStatus: 0,
        },
        {
          mouthId: 2,
          mouthNoShow: "2",
          mouthStatus: 0,
        },
        {
          mouthId: 3,
          mouthNoShow: "3",
          mouthStatus: 0,
        },
        {
          mouthId: 4,
          mouthNoShow: "4",
          mouthStatus: 0,
        },
        {
          mouthId: 5,
          mouthNoShow: "5",
          mouthStatus: 0,
        },
        {
          mouthId: 6,
          mouthNoShow: "6",
          mouthStatus: 0,
        },
        {
          mouthId: 7,
          mouthNoShow: "7",
          mouthStatus: 0,
        },
        {
          mouthId: 8,
          mouthNoShow: "8",
          mouthStatus: 0,
        },
        {
          mouthId: 9,
          mouthNoShow: "9",
          mouthStatus: 0,
        },
        {
          mouthId: 10,
          mouthNoShow: "10",
          mouthStatus: 0,
        },
        {
          mouthId: 11,
          mouthNoShow: "11",
          mouthStatus: 0,
        },
        {
          mouthId: 12,
          mouthNoShow: "12",
          mouthStatus: 0,
        },
        {
          mouthId: 13,
          mouthNoShow: "13",
          mouthStatus: 0,
        },
        {
          mouthId: 14,
          mouthNoShow: "14",
          mouthStatus: 0,
        },
        {
          mouthId: 15,
          mouthNoShow: "15",
          mouthStatus: 0,
        },
        {
          mouthId: 16,
          mouthNoShow: "16",
          mouthStatus: 0,
        },
      ],
      upmouth1: [
        {
          mouthId: 1,
          mouthNoShow: "1",
          mouthStatus: 0,
        },
        {
          mouthId: 2,
          mouthNoShow: "2",
          mouthStatus: 0,
        },
        {
          mouthId: 3,
          mouthNoShow: "3",
          mouthStatus: 0,
        },
        {
          mouthId: 4,
          mouthNoShow: "4",
          mouthStatus: 0,
        },
        {
          mouthId: 5,
          mouthNoShow: "5",
          mouthStatus: 0,
        },
        {
          mouthId: 6,
          mouthNoShow: "6",
          mouthStatus: 0,
        },
        {
          mouthId: 7,
          mouthNoShow: "7",
          mouthStatus: 0,
        },
        {
          mouthId: 8,
          mouthNoShow: "8",
          mouthStatus: 0,
        },
        {
          mouthId: 9,
          mouthNoShow: "9",
          mouthStatus: 0,
        },
        {
          mouthId: 10,
          mouthNoShow: "10",
          mouthStatus: 0,
        },
        {
          mouthId: 11,
          mouthNoShow: "11",
          mouthStatus: 0,
        },
        {
          mouthId: 12,
          mouthNoShow: "12",
          mouthStatus: 0,
        },
        {
          mouthId: 13,
          mouthNoShow: "13",
          mouthStatus: 0,
        },
        {
          mouthId: 14,
          mouthNoShow: "14",
          mouthStatus: 0,
        },
        {
          mouthId: 15,
          mouthNoShow: "15",
          mouthStatus: 0,
        },
        {
          mouthId: 16,
          mouthNoShow: "16",
          mouthStatus: 0,
        },
      ],
      //套餐信息
      meal: null,
      //充电时间
      time: ["智能充电", "1小时", "2小时","3小时","4小时","5小时","6小时","7小时"],
      timeObjArray: [
        {
          id: 0,
          name: "充满即止",
        },
        {
          id: 4,
          name: "四小时",
        },
        {
          id: 8,
          name: "八小时",
        },
      ],
      selTime: "充满即止",
      visibleTime: false,
      timeTip: "请合理选择充电时间",
      // 付费模式
      payTypeList: [["余额支付", "月卡"]],
      payType: "余额支付",
      myAmount: 0,
      // 我的月卡
      keyClassrecords: [],
      //订单消息
      orderInfo: {
		chargingType: '',					//充电类型 1智能充电 2自定义时长
		timeData: '',						//充电时长 单位分钟，当 chargingType为 2自定义时长，必传
        mealId: "",							//套餐Id
        mouthNo: "",						//格口 Id
        timeQuantum: 0,
        mouthId: "",						//格口 Id
        cellType: 0,						//电池类型 0：表示铅酸 1：表示锂电
        voltage: 48,						//电压 0-60 (整数)
        payType: 3,							//支付类型 支付类型 3:余额 4会员卡
        cardId: "",							//会员 Id
      },
      //选时计费
      cutAmount: 0,
      //订阅状态
      subMsg: false,
      //月卡
      info: {
        offset: 1,
        limit: "20",
        type: "1",
        equipmentId: "",
        province: "",
        city: "",
      },
      userCardsel: false,
      cardListVisiable: false,
      cardSelList: [],
      equipmentNumberOption: {},
	  chargeType: '',											//判断使用何种模式充电，按次数还是按时长
	  custodyType: '',											//保管类型
	  serviceType: '',											//服务类型
	  chargeMark: false,
      //输入框数据
      inputValue: ["", "", "", "", "", "", ""],
      inputBoxSelClass: ["", "", "", "", "", "", ""],
      // 键盘
      visibleKey: false,										// 控制键盘的显示
      keyLocation: "",											// 键盘定位到输入框的哪个位置
      //电池类型样式
      BatTypeClass: "pd20 BatteryType radius-8",
      BatTypeAutoClass: "pd20 selBatteryType  radius-8",
      batTypeSelVisible: false,
      //...
      battery: "手动选择",
      visibleVol: false,
      visibleBatTip: false,
      // 电池类型电压选择列表
      voltageList: [
        {
          name: "铅酸36v",
          type: 0,
          voltage: 36,
          BatVoltageClass: "batteryVolType mg10 radius-8 pd15-y  pd10-x",
        },
        {
          name: "铅酸48v",
          type: 0,
          voltage: 48,
          BatVoltageClass: "batteryVolType mg10 radius-8 pd15-y  pd10-x",
        },
        {
          name: "铅酸60v",
          type: 0,
          voltage: 60,
          BatVoltageClass: "batteryVolType mg10 radius-8 pd15-y pd10-x",
        },
        {
          name: "铅酸72v",
          type: 0,
          voltage: 72,
          BatVoltageClass: "batteryVolType mg10 radius-8 pd15-y  pd10-x",
        },
        {
          name: "锂电36v",
          type: 1,
          voltage: 36,
          BatVoltageClass: "batteryVolType mg10 radius-8 pd15-y  pd10-x",
        },
        {
          name: "锂电48v",
          type: 1,
          voltage: 48,
          BatVoltageClass: "batteryVolType mg10 radius-8 pd15-y  pd10-x",
        },
        {
          name: "锂电60v",
          type: 1,
          voltage: 60,
          BatVoltageClass: "batteryVolType mg10 radius-8 pd15-y  pd10-x",
        },
        {
          name: "锂电72v",
          type: 1,
          voltage: 72,
          BatVoltageClass: "batteryVolType mg10 radius-8 pd15-y  pd10-x",
        },
      ],
      // 收费标准
      visibleCharging: false,								//控制收费详情的轮播图是否显示的开关
      // 轮播
      indicatorDots: false,
      autoplay: true,
      interval: 3000,
      duration: 1000,
      imglist: ["", ""],
      advertisementShow: true,
      priceVisible: false,						//控制整个"收费详情"是否显示的开关
      onOrdervisible: false,
    };
  },
  // 检测长度，满8发请求；
  // 检测按倒那个输入框，按到哪一个后面归null
  // 按一个之后下一个自动高亮
  watch: {
    // 输入框监测
    // equipmentNumber(){
    //   if(this.equipmentNumber.length < 7){
    //   this.province=""
    //    this.equipmentId=""
    //    this.city=""
    //    this.equipmentId=""
    //   }
    // }
  },

  methods: {
    // 点击输入框
    // 充电桩编号,套餐,格口状态,支付
    inpBoxNext(f, v) {
      this.equipmentNumber = "";
      this.meal=null;
      this.autoChargingBtn = "default";
      this.priceVisible = false;
      this.mouth = this.upmouth1;
      this.payType="余额支付"
      this.orderInfo.payType = 3 
      this.records=[]
      let ff = f.slice(1, 2);
      this.inputValue[ff] = "";
      this.inputBoxSelClass[ff] = "inputBoxSel";
      this.keyLocation = ff;
      //键盘
      wx.hideTabBar();
      this.visibleKey = true;
      for (let p = 6; p >= ff; p--) {
		switch(ff) {
			case 0: {
			    (this.inputValue = ["", "", "", "", "", "", "", ""]),
			    (this.inputBoxSelClass = ["inputBoxSel", "", "", "", "", "", ""]);
			}
			break;
			case 1: {
			    (this.inputValue[1] = ""),
			    (this.inputValue[2] = ""),
			    (this.inputValue[3] = ""),
			    (this.inputValue[4] = ""),
			    (this.inputValue[5] = ""),
			    (this.inputValue[6] = ""),
			    (this.inputBoxSelClass = ["", "inputBoxSel", "", "", "", "", ""]);
			}
			break;
			case 2: {
				(this.inputValue[2] = ""),
			    (this.inputValue[3] = ""),
			    (this.inputValue[4] = ""),
			    (this.inputValue[5] = ""),
			    (this.inputValue[6] = ""),
			    (this.inputBoxSelClass = ["", "", "inputBoxSel", "", "", "", ""]);
			}
			break;
			case 3: {
				(this.inputValue[3] = ""),
			    (this.inputValue[4] = ""),
			    (this.inputValue[5] = ""),
			    (this.inputValue[6] = ""),
			    (this.inputBoxSelClass = ["", "", "", "inputBoxSel", "", "", ""]);
			}
			break;
			case 4: {
				(this.inputValue[4] = ""),
			    (this.inputValue[5] = ""),
			    (this.inputValue[6] = ""),
			    (this.inputBoxSelClass = ["", "", "", "", "inputBoxSel", "", ""]);
			}
			break;
			case 5: {
				(this.inputValue[5] = ""),
			    (this.inputValue[6] = ""),
			    (this.inputBoxSelClass = ["", "", "", "", "", "inputBoxSel", ""]);
			}
			break;
			case 6: {
				(this.inputValue[6] = ""),
			    (this.inputBoxSelClass = ["", "", "", "", "", "", "inputBoxSel"]);
			}
			break;
		}
      }
    },
    //键盘
    changeInpVal(val) {
      if (val <= 9) {
        //赋值
        this.inputValue[this.keyLocation] = val;
        // 样式更改
        if (this.keyLocation <= 6) {
          this.inputBoxSelClass[parseInt(this.keyLocation)] = "";
          this.keyLocation = parseInt(this.keyLocation) + 1;
          this.inputBoxSelClass[this.keyLocation] = "inputBoxSel";
          if (this.keyLocation == 7) {
            this.keyLocation = "";
            this.inputBoxSelClass = ["", "", "", "", "", "", ""];
            wx.showTabBar();
            this.visibleKey = false;
            this.equipmentNumber = "";
            this.equipmentNumber = this.equipmentNumber.concat(
              this.inputValue[0],
              this.inputValue[1],
              this.inputValue[2],
              this.inputValue[3],
              this.inputValue[4],
              this.inputValue[5],
              this.inputValue[6]
            );
            try {
              uni.setStorageSync("equipmentNumber", this.equipmentNumber);
            } catch (e) {
              // error
            }
            if (this.equipmentNumber.length == 7) {
              this.getDeviceInfo();
            }
          }
        }
      } else if (val == "d") {
        if (this.keyLocation == 0) {
          this.inputBoxSelClass = ["inputBoxSel", "", "", "", "", "", ""];
          this.inputValue = ["", "", "", "", "", "", ""];
        } else if (0 < this.keyLocation <= 7) {
          this.inputBoxSelClass[this.keyLocation] = "";
          this.inputValue[this.keyLocation] = "";
          this.keyLocation = this.keyLocation - 1;
          this.inputBoxSelClass[this.keyLocation] = "inputBoxSel";
        }
      }
    },
    //隐藏键盘
    onHideKey() {
      wx.showTabBar();
      this.visibleKey = false;
      this.inputBoxSelClass[this.keyLocation] = "";
    },
    // 扫一扫充电桩码
    scanQrcode() {
      uni.scanCode({
        onlyFromCamera: true,
        scanType: ["qrCode"],
        success: ({ errMsg, result }) => {
          if (errMsg === "scanCode:ok") {
            // 页面传参，二维码传出
            if (
              result.indexOf(
                "https://www.golwayhhln.top/r/DTkQSD3ddRr92wf?equipmentNumber="
              ) == -1
            ) {
              $Message({
                content: "请扫描正确的二维码",
                type: "error",
                duration: 3,
              });
            } else if (result.indexOf("mouthNo") == -1) {					//判断mouthNo有两种情况：存在与不存在
              this.equipmentNumber = result.match(
                /equipmentNumber=(\S*)&mouthNo=/
              )[1];
			  // 将equipmentNumber字符串切割好填入表格中
			  // this.inputValue = Array.from(this.equipmentNumber)
              this.inputValue[0] = this.equipmentNumber.slice(0, 1);
              this.inputValue[1] = this.equipmentNumber.slice(1, 2);
              this.inputValue[2] = this.equipmentNumber.slice(2, 3);
              this.inputValue[3] = this.equipmentNumber.slice(3, 4);
              this.inputValue[4] = this.equipmentNumber.slice(4, 5);
              this.inputValue[5] = this.equipmentNumber.slice(5, 6);
              this.inputValue[6] = this.equipmentNumber.slice(6, 7);
              this.getDeviceInfo();
            } else if (result.indexOf("mouthNo") != -1) {
              this.equipmentNumber = result.match(
                /equipmentNumber=(\S*)&mouthNo=/
              )[1];
			  // 将equipmentNumber字符串切割好填入表格中
			  // this.inputValue = Array.from(this.equipmentNumber)
              this.inputValue[0] = this.equipmentNumber.slice(0, 1);
              this.inputValue[1] = this.equipmentNumber.slice(1, 2);
              this.inputValue[2] = this.equipmentNumber.slice(2, 3);
              this.inputValue[3] = this.equipmentNumber.slice(3, 4);
              this.inputValue[4] = this.equipmentNumber.slice(4, 5);
              this.inputValue[5] = this.equipmentNumber.slice(5, 6);
              this.inputValue[6] = this.equipmentNumber.slice(6, 7);
              this.equipmentNumberOption = {};
              this.equipmentNumberOption.mouthNo = result.match(
                /mouthNo=(\S*)/
              )[1];
              this.getDeviceInfo();
            }
          }
        },
      });
    },
    //选择类型电压
    handleOpen1() {
      this.visibleVol = true;
    },
    handleClose1() {
      this.visibleVol = false;
      // setTimeout(() => {
      //  uni.showTabBar();
      // }, 100);
    },
	// 用户选择充电时长的函数
	// type的取值为0到7
	selectTime(type) {
		type = type === undefined ? 0: type									//首选项是"智能充电"
		this.selTimeClass = ["", "", "", "", "", ""];						//将之前选择的样式取消
		for (let i = 0; i <= this.time.length; i++) {
		  if (i == type) {
			  this.selTimeClass[type] = "border:2rpx solid #fff;background-color :#3e87f0;color:#fff;";
		  }
		}
		// type为0时候为智能充电
		if( type === 0 ) {
			this.orderInfo.chargingType = '1'
			this.orderInfo.timeData = 8 *  3600000
		} else {
			// type为不为0时候为计时充电
			this.orderInfo.chargingType = '2'
			this.orderInfo.timeData = type *  3600000
		}
	},
    //获取充电充电桩数据
    async getDeviceInfo() {
      this.loading.status = true;
      // 订单信息清空
      this.orderInfo = {
        mealId: "",																//套餐Id
        mouthNo: "",
        timeQuantum: 0,															//使用时长 套餐类型为时间段才有,单位（毫秒）
        mouthId: "",															//格口 Id
        cellType: 0,															//电池类型 0：表示铅酸 1：表示锂电
        voltage: 48,
        payType: 3,																//1.微信 2.支付宝 3余额
        cardId: "",																//会员Id 根据支付类型判断是否必传
		chargingType: this.orderInfo.chargingType,								//使用收费类型: 1按次收费 2按时间段收费
		timeData: this.orderInfo.timeData,
      };
      try {
        this.getOnOrder()
        //调用服务器接口，传入equipmentNumber从服务器获取数据
        const { data } = await userScan({
          equipmentNumber: this.equipmentNumber,
        });
		console.log('data',data);
		// 成功返回设备的正确数据
        if (data.code == 1) {
          this.mouth = data.data.mouth;									//mouth是一个数组
          this.upmouth = data.data.mouth;								//端口信息
          this.meal = data.data.meal;
		  this.chargeType = data.data.meal.chargeType					//从后台取到何种模式充电键值
		  this.custodyType = data.data.meal.custodyType					//保管类型
		  this.serviceType = data.data.meal.serviceType					//服务类型
          this.meal.amountTime=this.meal.amountTime==null?"-":(data.data.meal.amountTime/60).toString().slice(0,4)
          this.equipmentId = data.data.equipmentId;
          this.orderInfo.mealId = this.meal.mealId;
          this.province = data.data.province;
          this.city = data.data.city;
          this.area = data.data.area;
          this.equipmentAddress = data.data.equipmentAddress;
          this.meal.chargePowerData = JSON.parse(this.meal.chargePowerData);
		  // this.selMountId(1415,0)
		  this.addClass();												// 对mouth进行处理
          this.getUserCarfList();
		  this.judgeChargeType();
		  this.judgeTime()
          // 样式判断
          // 扫描端口可用检测
		  //从字符串获取到mouthNo，进去该if语句内部
          if (this.equipmentNumberOption.mouthNo) {
            // 检测端口状态
			// mouthStatus == 0代表端口处于空闲状态
			const tempValue = this.equipmentNumberOption.mouthNo.match(/(\S*)/)[1] - 1
            if (this.mouth[tempValue].mouthStatus == 0) {
              this.orderInfo.mouthId = this.mouth[tempValue].mouthId;
              this.mouth[tempValue].mouthStatus = 17;
			  this.selMountId(this.orderInfo.mouthId,tempValue)
            } else {
              $Message({
                content: "该端口使用中，请选择其他空闲端口",
                type: "error",
                duration: 3,
              });
            }
          }
		// 服务器返回数据异常
        } else if (data.code == 51 || data.code == 52) {
          this.equipmentNumber = "";
          setTimeout(() => {
            this.inputValue = [];
          }, 500);
        } else {
          this.equipmentNumber = "";
          setTimeout(() => {
            this.inputValue = [];
          }, 500);
        }
        this.swiperPic();
      } catch {}
      setTimeout(() => {
        this.loading.status = false;
      }, 1500);
    },
	// 对mouth进行处理的函数，遍历整个mouth，调用colorChange来分配不同的class属性
	// class属性作用于端口的外框，fontClass作用于端口内部的数字
	addClass() {
		const array = []
		this.mouth.map((item,index) => {
			array.push(Object.assign(item,{class: this.colorChange(item), fontClass: this.fontColorChange(item)}))
		})
		this.mouth = array
	},
	// 端口号内部数字的样式改变
	fontColorChange(item) {
		if(item.doorStatus==3) {
			return "color:#e02212"
		} else {
			if(item.doorType==0) {
				if(item.mouthStatus==0) {
					return "color:#00b56d"
				} else if(item.mouthStatus==1||item.mouthStatus==2) {
					return "color:#dcdcdc"
				} else {
					return "color:#e02212"
				}
			} else {
				if(item.mouthStatus==0||item.mouthStatus==1||item.mouthStatus==2) {
					return "color:#dcdcdc"
				} else {
					return "color:#e02212"
				}
			}
		}
	},
	
	// 改变class样式函数，传入的item为mouth数组中的一个对象
	colorChange(item) {
		if(item.mouthStatus==17) {
			return "radius-8 pd10-y flex flex-column-center mgt20 StatusBoxFree box-sizing"
		}
		if(item.doorStatus==3) {
			return "radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxActive box-sizing"
		} else {
			if(item.doorType==0) {
				if(item.mouthStatus==0) {
					return "radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxFree box-sizing"
				} else if(item.mouthStatus==1||item.mouthStatus==2) {
					return "radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxUse box-sizing"
				} else {
					return "radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxActive box-sizing"
				}
			} else {
				if(item.mouthStatus==0||item.mouthStatus==1||item.mouthStatus==2) {
					return "radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxUse box-sizing"
				} else {
					return "radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxActive box-sizing"
				}
			}
		}
	},
	//判断按次收费还是按时长收费
	judgeChargeType() {
		// 按次收费
		if(this.chargeType == '1' && (this.serviceType == '1' || this.serviceType == '0') && (this.custodyType == '1' || this.custodyType == '0')) {
			this.chargeMark = false
		} else {
		// 按时间收费
			this.chargeMark = true
		}
	},
    //跳转购买月卡套餐
    toPlanList() {
      if (this.equipmentId == 0) {
        $Message({
          content: "请输入充电桩编号",
          type: "error",
          duration: 2,
        });
      } else {
        uni.navigateTo({
          url: `/pagesA/userCard/planList?id=${this.equipmentId}&num=${this.equipmentNumber}&mouthNo=${this.order.mouthNo}`,
        });
      }
    },
    //获取个人钱包金额
    async getAmounts() {
      //调用服务器接口
      const { data } = await getAmount();
      if (data.code == 1) {
		// 调用引入的方法floatAdd对两个浮点数金额数目相加，防止溢出
		// myAmount包含充值金额加上赠送金额
		this.myAmount = floatAdd(data.data.amount, data.data.givenAmount)
        // this.myAmount = data.data.amount + data.data.givenAmount;
      }
    },
	// 同步获取个人钱包金额
	async onTimeGetAmount() {
		if(store.state.user.token){
		    if(this.payType == '余额支付') {
		    	const { data } = await getAmount()
		    	if (data.code == 1) {
		    		this.myAmount = floatAdd(data.data.amount, data.data.givenAmount)
		    		// this.myAmount = data.data.amount + data.data.givenAmount;
		    		this.getOrder()
		    	}
		    } else {
		    	this.getOrder()
		    }
		} else {
		   uni.redirectTo({
		     url: `/pagesA/auth/index`,
		   })
		}
	},
    //获取个人月卡
    async getUserCarfList () {
      this.loading.status = true;
      this.userCardsel = true;
      this.records = [];
      //调用服务器接口
      if (this.equipmentId) {
        this.info.province = this.province;
        this.info.equipmentId = this.equipmentId;
        this.info.city = this.city;
        this.info.type = 2;
      }
      // 先检测有无进行中订单，有无需检测月卡，直接提示有进行中订单，
      const { data } = await userCardList({ ...this.info });
      if (data.code === 1) {
        let { records, total } = data.data;
        this.records = records;
        if (records.length == 0 && this.nowOrderId != null) {

        } else if (records.length == 1) {
          this.orderInfo.payType = 4;
          this.orderInfo.cardId = records[0].cardId;
          this.payType = "月卡";
        }
      }
      this.loading.status = false;
    },
	// 查询用户进行中或未支付订单
    async getOnOrder() {
      const { data } = await getUseOrder();
      if (data.code == 1) {
        this.nowOrderId = data.data;
        if (data.data==null) {
          
        } else  {
          this.payType == "余额支付"
          this.orderInfo.payType = 3          
          $Message({
            content: "你有正在进行中的订单",
            type: "error",
            duration: 3,
          });

        }
      }
    },
    // 跳转订单列表
    goToOrder() {
      this.cardListVisiable=false
      let OrderUrlId=this.nowOrderId
 
      uni.switchTab({
       url:'/pages/order/list'
      });
    },
    //删除月卡，暂无此功能
    // async delUserCard() {
    //   //调用服务器接口
    //   const {data}=await userCardDel(cardId);
    // },
    //Picker选择
    // bindPickerChange:function (e) {
    //   this.index = e.target.value;
    // },
    // 格口选择
	// 首先的输入equipmentNumber来调取相关信息mouthId
    selMountId(mouthId,index) {
		console.log(mouthId,index,'enter')
		// equipmentNumber就是充电桩编号，例如9999998
      if (this.equipmentNumber) {
        // 二维码有带参数，改变固定选择，改变this.mouth,重新选择
        // 1.判断可不可用 2.判断是否有选择了，没有改变样式， 3.重新选择变换样式，并改变订单信息
		// 当选择页面上的15，16号按钮，将会弹出电池类型的选择
        if (index == 14 || index == 15) {
          if ((index == 14 && this.mouth[14].mouthStatus == 0) || (index == 15 && this.mouth[15].mouthStatus == 0)) {
            this.batTypeSelVisible = true;								// 电池类型"自动适配"与"手动选择"的显示开关
            this.visibleVol = true;										// 电池手动选择弹出框
          }
        } else {
          this.batTypeSelVisible = false;
          this.battery = "手动选择";
          // 默认48v锂电
          this.orderInfo.voltage = 48 + 6;
          this.orderInfo.cellType = 1;
          for (let i = 0; i < 8; i++) {
            this.voltageList[i].BatVoltageClass = "batteryVolType mg10 radius-8 pd15-y pd10-x";
          }
          this.BatTypeAutoClass = "pd20 selBatteryType  radius-8";
          this.BatTypeClass = "pd20 BatteryType radius-8";
        }
        //选择前先储存
		// upmouth也是存储的根mouth一样的数据，但这个时候mouth增添了class与colorClass数据
        this.mouth = JSON.parse(JSON.stringify(this.upmouth));							//这是为什么选择其他端口颜色会恢复的原因
        // this.orderInfo.mouthId = "";
		// this.orderInfo.mouthId = mouthId;
        this.orderInfo.mouthNo = index;
        //有扫码数据
        if (this.equipmentNumberOption.mouthNo) {
          if (this.mouth[index].mouthStatus == 0) {
            this.mouth[this.equipmentNumberOption.mouthNo.match(/(\S*)/)[1] - 1].mouthStatus = 0;
            this.orderInfo.mouthId = mouthId;
            this.mouth[index].mouthStatus = 17;
            this.orderInfo.mouthNo = index;
			this.mouth[index].class = "radius-8 pd10-y flex flex-column-center mgt20 userSelectBox box-sizing"
			this.mouth[index].fontClass = "color:#3e87f0"
          } else if (
            this.mouth[index].mouthStatus == 1 ||							//1=充电中, 2=电池充满
            this.mouth[index].mouthStatus == 2
          ) {
            $Message({
              content: "该端口已被占用",
              type: "error",
              duration: 2,
            });
          }
          //选择的是二维码上端口
          else if (
            this.mouth[this.equipmentNumberOption.mouthNo.match(/(\S*)/)[1] - 1]
              .mouthStatus === 17
          ) {
            // this.orderInfo.mouthId = "";
            this.mouth[
              this.equipmentNumberOption.mouthNo.match(/(\S*)/)[1] - 1
            ].mouthStatus = 0;
            this.orderInfo.mouthNo = this.equipmentNumberOption.mouthNo - 1;
			this.mouth[index].class = "radius-8 pd10-y flex flex-column-center mgt20 userSelectBox box-sizing"
			this.mouth[index].fontClass = "color:#3e87f0"
          } else {
            $Message({
              content: "端口故障，请选择其他端口充电",
              type: "error",
              duration: 2,
            });
          }
        }
        //  无扫码数据
        else if (this.mouth[index].mouthStatus == 0) {
			// mouthStatus为0是端口处于空闲状态
          this.orderInfo.mouthId = mouthId;
          this.mouth[index].mouthStatus = 17;
          this.orderInfo.mouthNo = index;
		  this.mouth[index].class = "radius-8 pd10-y flex flex-column-center mgt20 userSelectBox box-sizing"
		  this.mouth[index].fontClass = "color:#3e87f0"
        } else if (this.mouth[index].mouthStatus == 1 || this.mouth[index].mouthStatus == 2) {
			// mouthStatus等于2端口处于充满状态与mouthStatus为充电中状态
          $Message({
            content: "该端口已被占用",
            type: "error",
            duration: 2,
          });
        } else {
          $Message({
            content: "端口故障，请选择其他端口充电",
            type: "error",
            duration: 2,
          });
        }

        // 检测
		// 没有输入充电桩编号的情况
      } else {
        wx.showToast({
          title: "请输入充电桩编号",
          icon: "none",
        });
      }
	  if(this.mouth[index].doorStatus == 3) {
	  	this.mouth[index].class = "radius-8 pd10-y flex flex-column-center mgt20 selStatusBoxActive box-sizing"
	  	this.mouth[index].fontClass = "color:#e02212"
	      $Message({
	        content: "端口故障，请选择其他端口充电",
	        type: "error",
	        duration: 2,
	      });
	  }
    },
    // 自动适配按钮绑定函数
    autoAdaptive() {
      this.battery = "手动选择";
      // 默认48v锂电
      this.orderInfo.voltage = 48 + 6;
      this.orderInfo.cellType = 1;
      for (let i = 0; i < 8; i++) {
        this.voltageList[i].BatVoltageClass =
          "batteryVolType mg10 radius-8 pd15-y pd10-x";
      }
      this.BatTypeAutoClass = "pd20 selBatteryType radius-8";
      this.BatTypeClass = "pd20 BatteryType radius-8";
    },
    //电池种类选择
	// type为电池的种类，区分为铅酸或者锂电
	// voltage为电池电压
	// index为点击的电池对象
    batChange(type, voltage, index) {
      let batType = "";
	  switch(type) {
		  case 0: {
			batType = "铅酸"
		  }
		  break;
		  case 1: {
			batType = "锂电"
		  }
		  break;
		  default: {
			this.battery = "手动选择"
		  }
	  }
      // if (type == 0) {
      //   batType = "铅酸";
      // } else if (type == 1) {
      //   batType = "锂电";
      // } else {
      //   this.battery = "手动选择";
      // }
	  switch(voltage) {
		  case 36: {
			  this.battery = batType + voltage + "v";
		  }
		  break;
		  case 48: {
			  this.battery = batType + voltage + "v";
		  }
		  break;
		  case 60: {
			  this.battery = batType + voltage + "v";
		  }
		  break;
		  case 72: {
			  this.battery = batType + voltage + "v";
		  }
		  break;
	  }
      // if (voltage == 36) {
      //   this.battery = batType + voltage + "v";
      // } else if (voltage == 48) {
      //   this.battery = batType + voltage + "v";
      // } else if (voltage == 60) {
      //   this.battery = batType + voltage + "v";
      // } else if (voltage == 72) {
      //   this.battery = batType + voltage + "v";
      // }
      for (let i = 0; i < 8; i++) {
		  // 未选择的电池类型的样式
        this.voltageList[i].BatVoltageClass = "batteryVolType mg10 radius-8 pd15-y pd10-x";
        if (i == index) {
			 // 已经选择的电池类型的样式
          this.voltageList[index].BatVoltageClass = "selBatVoltageType mg10 radius-8 pd15-y pd10-x";
        }
      }
	  // 对自动选择与手动选择样式进行更改
      this.BatTypeClass = "pd20 selBatteryType radius-8";
      this.BatTypeAutoClass = "pd20 BatteryType radius-8";
      setTimeout(() => {
        this.visibleVol = false;
        wx.showTabBar();
      }, 1000);
      this.visibleBatTip = false;								//电池种类选择建议的显示开关
      // 订单信息
      this.orderInfo.voltage = voltage + 6;						//将用户选择的数据填入orderInfo对象
      this.orderInfo.cellType = type;							//voltage为电压数据，cellType为电池种类数据
    },
    //
    closePopupView() {
      this.visibleBatTip = false;
    },
    //充电时间选择
    // async bindTimeChange(e) {
    //   wx.showTabBar();
    //   this.orderInfo.timeQuantum = "";
    //   this.selTime = this.time[e.detail.value[0]];
    //   this.orderInfo.timeQuantum = this.timeObjArray[e.detail.value[0]].id;
    //   //金额计算
    //   if (this.orderInfo.timeQuantum && this.meal.mealId) {
    //     //调用服务器接口
    //     const { data } = await calculationAmount({
    //       timeQuantum: this.orderInfo.timeQuantum * 3600000,
    //       mealId: this.meal.mealId,
    //     });
    //     this.cutAmount = data.data;
    //   }
    // },
    // 了解更多
    tipOpen() {
      this.dialogShow = true;
    },
    tipClose() {
      this.dialogShow = false;
    },
    // 智能充电按钮绑定函数
	// 发送充电桩编号到后台，获取meal参数
	// priceVisible控制'收费详情'的显示
  //   chargingVisiable() {
  //     if(this.meal!=null) {
  //      // if (this.autoChargingBtn == "default") {
  //      //  this.autoChargingBtn = "primary";
  //       this.meal.chargePowerData == null?(this.priceVisible = false):(this.priceVisible = true);
		// // } else {
  // //       this.autoChargingBtn = "default";
  // //       this.priceVisible = false;
		// // }
  //     } else {
  //        $Message({
  //               content: "请输入充电桩编号",
  //               type: "error",
  //               duration: 3,
  //           });
  //     }
  //   },
  // 点击收费详情，切换收费详情细节是非显示
    priceVisibleView(){
     this.visibleCharging=!(this.visibleCharging)
    },
    // 充值
    // toRecharge() {
    //   uni.navigateTo({
    //     url: `/pagesA/userRecharge/index?equipmentNumber=${this.equipmentNumber}
    //         `,
    //   });
    // },
    //付费模式选择
    // 默认选择-充电桩编号已输入，且只有一张卡
    payTypeChange: function (e) {
      if (this.equipmentId) {
        this.orderInfo.payType = "";
        this.records = [];
        let payType1 = this.payTypeList[0][e.detail.value[0]];
        this.payType = payType1;
        if (this.payType == "余额支付") {
          this.orderInfo.payType = 3;
        } else if (this.payType == "月卡") {
          this.getUserCarfList();
          if (this.cardListVisiable) {
            
          }
          this.cardListVisiable = true;
          this.orderInfo.payType = 4;
        }
      } else {
        $Message({
          content: "请输入充电桩编号",
          type: "error",
          duration: 3,
        });
      }
    },
    //计时
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    // 取消选择月卡
    closeSelCard() {
      this.cardListVisiable = false;
      this.orderInfo.cardId = "";
      this.payType = "余额支付";
      this.orderInfo.payType = 3;
    },
    //选择月卡
    selCard(cardId, index) {
      console.log(index);
      this.orderInfo.cardId = cardId;
      // let sel =  this.cardSelList;
      // this.cardSelList=[]
      // for(let i = 0; i<sel.length;i++){
      //   this.cardSelList[i] = "cardNoSel mgl10 ta";
      //   if(i==index){
      //     this.cardSelList[i]="cardSel mgl10 ta"
      //   }
      // }
    },
    confirmselCard() {
      this.cardListVisiable = false;
    },
    //提交订单，开始充电按钮绑定的函数
    async getOrder() {
      // this.getAmounts();
      // 筛选- 月卡or余额
      //  月卡 - 判断月卡id，充电桩信息
      //  余额 - 判断，充电桩信息
	  // equipmentId为充电桩ID
      if (this.equipmentNumber == "" || this.equipmentId == "") {
        $Message({
          content: "请输入充电桩编号",
          type: "error",
          duration: 3,
        });
      } else if (this.equipmentNumber != "" && this.orderInfo.mealId == undefined) {
        $Message({
          content: "该充电桩暂时无法使用，请更换充电桩",
          type: "error",
          duration: 3,
        });
      } else if (
        !(
          this.orderInfo.mealId &&
          this.orderInfo.mouthId &&
          this.orderInfo.payType
        )
      ) {
        const parameter = [
          [this.orderInfo.mealId, "请输入充电桩编号"],
          [this.orderInfo.mouthId, "请选择充电格口"],
          [this.orderInfo.payType, "请选择支付方式"],
        ];	
        for (let j = 0; j < parameter.length; j++) {
          if (parameter[j][0] == 0) {
            $Message({
              content: `${parameter[j][1]}`,
              type: "error",
              duration: 3,
            });
          }
        }
      }
	  else if (this.orderInfo.chargingType == undefined) {
        $Message({
          content: "请选择充电时长",
          type: "error",
          duration: 3,
        });
      }
	  // 若使用余额支付，且myAmount小于meal.lowAmount（该订单需要的最小金额），那么报错，且跳转到用户充值界面
	   else if (this.payType == "余额支付" && this.myAmount < this.meal.lowAmount) {
          $Message({
            content: `您的余额不足${this.meal.lowAmount / 100}元,为保障充电效率,请充值或购买月卡后使用,感谢您的理解与配合`,
			type: "error",
            duration: 2,
          });
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/userRecharge/index",
            });
          }, 2000);
      } else {
        //以上条件均满足调用服务器接口
        const { data } = await createOrder({
          mealId: this.orderInfo.mealId,
          mouthId: this.orderInfo.mouthId,
          payType: this.orderInfo.payType,
          cardId: this.orderInfo.cardId,
          cellType: this.orderInfo.cellType,
          voltage: this.orderInfo.voltage,
		  chargingType: this.orderInfo.chargingType,
		  timeData: this.orderInfo.timeData,
		  equipmentNumber: this.equipmentNumber
        });
        // 充电结束通知&退款通知
        if (data.code == 1) {
          wx.requestSubscribeMessage({
            tmplIds: [
				"EBlHwXhwVs4jHDBDKEpVY0LwmOtq0F2qvOgXSP8MwpY",
				"EBlHwXhwVs4jHDBDKEpVY4kxIigbQeBh1q1-i-Sw4Gc",
				"0Oenup9sJapppPkvPXsaDtBs36u6eTzgdPaXwJg4llI"
            ],
			// 当订阅消息成功返回时，显示提示并且跳转
            success(res) {
              $Message({
                content: "订单提交成功",
                type: "success",
                duration: 3,
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: `/pages/order/detail?orderId=${data.data}`,
                });
              }, 2000);
            },
			// 订阅消息失败发出提示，并在2s后切换到“充电记录”的tabbar界面
            fail(res) {
              $Message({
                content: "消息订阅失败",
                type: "error",
                duration: 3,
              });
              setTimeout(() => {
                uni.switchTab({
                  url: `/pages/order/list`,
                });
              }, 2000);
            },
          });
        } else if(data.code==2){
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/order/inputCode",
            });
          }, 2000);
        }
      }
    },
    //消息订阅
    // subscriptionMsg() {
    //   wx.requestSubscribeMessage({
    //     tmplIds: [
    //       "573NTzEorguuQsa9dH4jKGTQHbFx3AJ1Uo5ZN3gVHtw",
    //       "b7h8Q4fJcc12BprB2RsMCMWm8JHmY5A0E8UcSVThxOs",
    //       "G_Jz7faP2SqauBAwSUCkb13c9UiutHmw350USzxAG-E",
    //     ],
    //     success(res) {
    //       // uni.navigateTo({
    //       //   url: `/pagesA/order/list`
    //       // });
    //     },
    //     fail(res) {
    //       $Message({
    //         content: "消息订阅失败",
    //         type: "error",
    //         duration: 3,
    //       });
    //       setTimeout(() => {
    //         uni.navigateTo({
    //           url: `/pagesA/order/list`,
    //         });
    //       }, 2000);
    //     },
    //   });
    // },
    //广告图
	// 设置用户类型userType，默认
    async swiperPic() {
      try {
        let userType = 2;
        if (this.province == "") {
          userType = 1;
        }
        const { data } = await systemParamPic(7, {
          province: this.province,
          userType: userType,
        });
        if (data.data == null) {
          this.advertisementShow = false;
        }
        if (data.code == 1) {
          this.imglist = data.data.parameter.split(",");
        }
      } catch (error) {
        console.log(error);
      }
    },
	 //根据后台返回的数据进行条件判断
	judgeTime() {
		// this.chargeMark为false时为按次收费
		// 按次收费不显示收费详情
		if(this.chargeMark == false) {
			this.priceVisible = false
			this.visibleCharging = false
			this.time = ["智能充电"]
		} else {
			if(this.meal.chargePowerData!=null) {
			  this.priceVisible = true
			  this.visibleCharging = true
			}
			this.time = ["智能充电","1小时", "2小时","3小时","4小时","5小时","6小时","7小时"]
		}
		console.log("judgeTime function over")
		return
	},
  },
  computed: {
    userInfo() {
      return store.state.user.userInfo;
    },
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },

  onLoad(option) {
    // https://www.golwayhhln.top/r/DTkQSD3ddRr92wf?equipmentNumber=9000001&mouthNo=10
    // 接收扫码参数
    // 充值，月卡，主页
    if (option.q != undefined) {
      //微信扫二维码进入
	  //使用 decodeURIComponent()对编码后的 URI 进行解码
	  // link为解析以后的字符串
      let link = decodeURIComponent(option.q);
	  // 从link中解析出equipmentNumber字符串，分别赋值给equipmentNumber与equipmentNumberOption.equipmentNumber
      this.equipmentNumber = link.match(/equipmentNumber=(\S*)&/)[1].trim();
      this.equipmentNumberOption.equipmentNumber = link.match(/equipmentNumber=(\S*)&/)[1].trim();
	  //  从link中解析出mouthNo字符串，赋值给equipmentNumberOption.mouthNo
      this.equipmentNumberOption.mouthNo = link.match(/mouthNo=(\S*)/)[1];
      console.log(this.equipmentNumberOption);
	  // 将equipmentNumber填入方框中
	  this.inputValue = [...this.equipmentNumber]
      this.getDeviceInfo();
      try {
        uni.setStorageSync("equipmentNumber", this.equipmentNumber);
      } catch (e) {
        // error
      }
    } else if (option.equipmentNumber) {
      //小程序主页扫一扫进入
      this.equipmentNumber = option.equipmentNumber;
      this.equipmentNumber = option.equipmentNumber.trim();
	  this.inputValue = [...this.equipmentNumber]
      this.equipmentNumberOption = option;
      console.log(option);
      this.getDeviceInfo();
      try {
        uni.setStorageSync("equipmentNumber", this.equipmentNumber);
      } catch (e) {
        // error
      }
    }
  },
  onShow() {
	  this.selectTime();
	  this.getAmounts();
    if (this.equipmentId) {
      this.getUserCarfList();
      this.getAmounts();
    }
    // this.getOnOrder();
  },
  onReady() {
    // this.swiperPic();
  },
  // 页面下拉取到存储的equipmentNumber值，切割赋值给inputValue——使用ES6语法代替
  onPullDownRefresh() {
    try {
      const value = uni.getStorageSync("equipmentNumber");
      if (value) {
        this.equipmentNumber = value;
		// inputValue为数组，将equipmentNumber字符串解构为数组
		this.inputValue = [...this.equipmentNumber]
      }
    } catch (e) {
      // error
    }
	this.getAmounts();
    this.getDeviceInfo();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  },
};
</script>


	